$(document).ready(function() {
    // 下滑特效
    $('#header').load('header.html')
    $('#footer').load('footer.html')
    $('.subtance-first,.subtance-inside').click(function() {
            $('.subtance-glide').slideToggle(1000)
        })
        // 小轮播
    let count = 0

    function back() {
        count++
        if (count == 3) {
            count = 0
        }
        $('.big').stop().animate({
            left: -count * $('.big>li:first').width()
        })
    }

    function font() {
        count--
        if (count == -1) {
            count = 2
        }
        console.log(count)
        $('.big').stop().animate({
            left: -count * $('.big>li:first').width()
        })
    }
    let timer = setInterval(function() {
        back()
    }, 2000)
    $('.subtance-father').hover(function() {
        clearInterval(timer)
    }, function() {
        clearInterval(timer)
        timer = setInterval(() => {
            back()
        }, 2000)
    })
    $('.btn-left').click(function() {
        font()
    })
    $('.btn-right').click(function() {
            back()
        })
        // 放大镜
    pAjax({
        url: '../server/lq_index.php',
        data: {
            cat_two_id: 111
        }
    }).then(function(res) {
        let arr = JSON.parse(res)
        $.each(arr, function(index, ele) {
            $(`<li data-id=${ele.cat_three_id}><img src=${ele.goods_introduce} alt=""></li>`).appendTo($('.big'))
        })
    })

    function have(n) {

        pAjax({
            url: '../server/lq_indexone.php',
            data: {
                cat_three_id: n
            }
        }).then(
            function(res) {
                let json = JSON.parse(res)
                    // console.log(json)
                $('.subtance-uncle').empty()
                $(`<div class="subtance-left">
                    <div class="small">
                        <div class="mask">

                        </div>
                        <img src=${json[0].goods_introduce} alt="">
                    </div>
                    <div class="huge">
                        <img src=${json[0].goods_introduce} alt="">
                    </div>
                    <ul class="sad">
                        <li class="bor"><img src=${json[0].goods_introduce} alt=""></li>
                        <li><img src=${json[1].goods_introduce} alt=""></li>
                        <li><img src=${json[2].goods_introduce} alt=""></li>
                        <li><img src=${json[3].goods_introduce} alt=""></li>
                    </ul>
                </div>
                <div class="subtance-right">
                    <p class="en-name">${json[0].goods_name}</p>
                    <p class="cn-name">${json[2].cat_one_id}</p>
                    <div class="price-wrap">
                        <div class="price-wrap-money"><span class="small-one">¥</span><span class="big-one">${json[0].goods_price}</span></div>
                    </div>
                    <p class="cake-type">Cake type | 蛋糕种类</p>
                    <p class="cake-small-name">豆沙裱花</p>
                    <div class="cake-count">
                        <span class='cake-one'>数量：</span>
                        <div class="cake-inside">
                            <div class="cake-top">
                                <i class="iconfont iconshangjiantou1"></i>
                            </div>
                            <div class="cake-bottom">
                                <i class="iconfont iconxiajiantou1"></i>
                            </div>
                        </div>
                        <input type="text" value="1">
                    </div>
                    <div class="cake-size">
                        <span class='cake-one'>尺寸：</span>
                        <div class="cake-inside">
                            <div class="cake-top">
                                <i class="iconfont iconshangjiantou1"></i>
                            </div>
                            <div class="cake-bottom">
                                <i class="iconfont iconxiajiantou1"></i>
                            </div>
                        </div>
                        <input type="text" value="6寸">
                    </div>
                    <div class="eat-people" id="people_count">
                        <span class="eat-text">适合2-4人食用</span>
                        <span>含5套餐具</span>
                    </div>
                    <div class="cake-book">
                        <span>需提前5小时预订</span>
                    </div>
                    <div class="buy-btn">
                        <button class="action-addtocart join-cart" type="submit" rel="_request">
                            <img class="cart-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/btn-cart-icon.png" alt="">
                            <div class="join-cart-text">加入购物车</div>
                          </button>
                        <button type="submit" class="action-buynow buy-now" value="立即购买" rel="_request">立即购买</button>
                    </div>
                    <div class="sweet-level">
                        <span>Sweetness level | 甜度</span>
                    </div>
                    <div class="stars">
                        <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                        <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                        <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                        <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-icon.png" alt="">
                        <img class="star-icon" src="https://www.boncake.com.cn/themes/boncake/images/img/star-light-icon.png" alt="">

                    </div>
                    <div class="store">
                        <span>Preservation conditions｜保鲜条件</span>
                    </div>
                    <div class="store-desc">
                        <span>最佳保存温度0°C，最佳赏味期为24小时内<br>食用前请在室温下放置20分钟，口感更佳</span>
                    </div>
                    <button type="button" onclick="window.location.href='/index.php/product-1633.html'" class="more-btn">了解更多&gt;&gt;</button>
            </div>`).appendTo($('.subtance-uncle'))
                $('.subtance-uncle .sad').children().click(
                    function() {
                        $(this).addClass('bor').siblings().removeClass('bor')
                        let index = $(this).index()
                        $('.huge>img').attr('src', json[index].goods_introduce)
                        $('.small > img').attr('src', json[index].goods_introduce)

                    }
                )
                $('.subtance-uncle .small').hover(function() {
                    $('.subtance-uncle .mask').css({
                        display: 'block'
                    })
                    $('.subtance-uncle .huge').css({
                        display: 'block'
                    })
                }, function() {
                    $('.subtance-uncle .mask').css({
                        display: 'none'
                    })
                    $('.subtance-uncle .huge').css({
                        display: 'none'
                    })
                })

                $('.subtance-uncle .small').mousemove(function(ev) {
                    let x = ev.pageX - $('.subtance-uncle .mask').width() / 2 - $(this).offset().left
                    let y = ev.pageY - $('.subtance-uncle .mask').height() / 2 - $(this).offset().top
                    if (x < 0) {
                        x = 0
                    } else if (x >= $('.subtance-uncle .small').width() - $('.subtance-uncle .mask').width()) {
                        x = $('.subtance-uncle .small').width() - $('.subtance-uncle .mask').width()
                    }

                    if (y < 0) {
                        y = 0
                    } else if (y >= $('.subtance-uncle .small').height() - $('.subtance-uncle .mask').height()) {
                        y = $('.subtance-uncle .small').height() - $('.subtance-uncle .mask').height()
                    }
                    $('.subtance-left .huge>img').css({
                        left: -x * ($('.subtance-uncle .huge').width() * 3.16 - $('.subtance-uncle .huge').width()) / ($('.subtance-uncle .small').width() - $('.subtance-uncle .mask').width()),
                        top: -y * ($('.subtance-uncle .huge').height() * 3.16 - $('.subtance-uncle .huge').height()) / ($('.subtance-uncle .small').height() - $('.subtance-uncle .mask').height())
                    })
                    $('.subtance-uncle .mask').css({
                        left: x,
                        top: y
                    })
                })

            }
        )

    }
    if (localStorage.getItem('dataId') === null) {
        have('111luo')
    }
    // console.log($('.subtance-uncle'))
    $('.big').on('click', 'li', function(ev) {
        let id = $(this).attr('data-id')
        localStorage.setItem('dataId', id)
        have(localStorage.getItem('dataId'))
    })
})